<template>
  <div class="main">
    <van-nav-bar title="个人中心" fixed />
    <div class="image">
      <van-image round width="6rem" height="6rem" :src="src" />
    </div>
    <div class="name">{{ msg }}</div>
    <div class="content">
      <van-cell-group>
        <van-cell
          title="个人信息"
          size="large"
          @click="information"
          is-link
          icon="friends-o"
        />
      </van-cell-group>
      <van-cell-group style="margin-top: 2px">
        <van-cell
          title="历史借阅"
          size="large"
          @click="history"
          is-link
          icon="notes-o"
        />
      </van-cell-group>
      <van-cell-group style="margin-top: 2px">
        <van-cell
          title="可借阅数"
          size="large"
          @click="number"
          is-link
          icon="apps-o"
        />
      </van-cell-group>
      <van-cell-group style="margin-top: 2px">
        <van-cell
          @click="cancel"
          size="large"
          is-link
          icon="close"
          title="退出"
        />
      </van-cell-group>
    </div>
    <van-tabbar v-model="active">
      <van-tabbar-item replace to="/main" icon="wap-home-o"
        >首页</van-tabbar-item
      >
      <van-tabbar-item replace to="/borrow" icon="new-o">借书</van-tabbar-item>
      <van-tabbar-item replace to="/history" icon="records"
        >历史借阅</van-tabbar-item
      >
      <van-tabbar-item replace to="/personal" icon="user-circle-o"
        >个人中心</van-tabbar-item
      >
    </van-tabbar>
  </div>
</template>

<script>
import { getByUsername } from "@/api/personalApi";
export default {
  data() {
    return {
      src: "",
      active: 3,
      msg: localStorage.getItem("username"),
    };
  },
  methods: {
    information() {
      this.$router.push({
        name: "personalData",
      });
    },
    cancel() {
      this.$Modal.confirm({
        title: "退出",
        content: "你确认要退出登录吗?",
        onOk: () => {
          this.$Message.success("退出成功"),
            localStorage.removeItem("username");
          setTimeout(() => {
            this.$router.push({
              name: "login",
            });
          }, 1000);
        },
        onCancel: () => {
          this.$Message.info("用户取消退出");
        },
      });
    },
    history() {
      this.$router.push({
        name: "history",
      });
    },
    number() {
      this.$router.push({
        name: "number",
      });
    },
  },
  created() {
    localStorage.removeItem("type");
    localStorage.removeItem("name");
    getByUsername({ username: localStorage.getItem("username") }).then(
      (res) => {
        this.src = res.image;
      }
    );
  },
};
</script>

<style>
.main {
  background-color: antiquewhite;
  width: 100%;
  height: 100%;
  position: fixed;
}
.image {
  margin-top: 20%;
  text-align: center;
}
.name {
  text-align: center;
  font-size: x-large;
}
.content {
  margin-top: 16px;
}
</style>
